<template>
	<view class="wrapper">
		<u-navbar title="头像" bgColor="#000000" autoBack leftIconColor="#FFFFFF" titleStyle="color: #FFFFFF" safeAreaInsetTop>
			<!-- <view class="u-nav-slot" slot="right"><u-icon name="more-dot-fill" color="#FFFFFF"
					size="48rpx"></u-icon></view> -->
		</u-navbar>
		<!-- 头像 -->
		<view class="avatar">
			<u-image @click="show = true" :showLoading="true" :src="avatar ? avatar : 'https://res.jiyaqi.com/pet/miniapp/public/user.png'" width="100vw" height="100vw"></u-image>
		</view>

		<!-- <ksp-cropper mode="fixed" :width="800" :height="800" :maxWidth="1024" :maxHeight="1024" :url="avatarUrl" @cancel="oncancel" @ok="onok"></ksp-cropper> -->
		<u-action-sheet
			:actions="list"
			@select="selectClick"
			cancelText="取消"
			:safeAreaInsetBottom="true"
			:closeOnClickOverlay="true"
			:closeOnClickAction="true"
			@close="show = false"
			:show="show"
		></u-action-sheet>
	</view>
</template>

<script>
import { mapGetters, mapActions, mapState } from 'vuex';
import { BaseUrl } from '@/common/config.js';
import AliOss from '@/common/oss.js';
import { getUploadAccount } from '@/api/upload/upload.js';
import dayjs from 'dayjs';
export default {
	data() {
		return {
			time: '',
			ossData: {}, // 上传
			title: '标题',
			list: [
				{
					name: '拍照'
				},
				{
					name: '从相册选择'
				},
				{
					name: '保存图片'
				}
			],
			show: false,
			avatarUrl: '' // 裁剪图片地址
			// path: '' // 上传地址
		};
	},
	computed: {
		...mapState('user', ['token', 'avatar'])
	},
	mounted() {
		this.time = dayjs().format('YYYYMMDD');
		// 上传参数
		getUploadAccount().then(res => {
			this.ossData = res;
		});
	},
	methods: {
		...mapActions('user', ['updateInfo', 'GetUserInfo']),
		beforeUpload(file) {
			const isLt5M = file.size / 1024 / 1024 < 5;
			if (!isLt5M) {
				uni.$u.toast('上传图片大小不能超过5MB');
			}
			return isLt5M;
		},
		selectClick(e) {
			switch (e.name) {
				case '拍照':
					return uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['camera'], //从相册选择
						success: res => {
							// let valite = this.beforeUpload(res.tempFiles[0]);
							// if (valite) this.avatarUrl = res.tempFilePaths[0];
							this.onok(res.tempFiles[0]);
						}
					});
				case '从相册选择':
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: res => {
							// let valite = this.beforeUpload(res.tempFiles[0]);
							// if (valite) this.avatarUrl = res.tempFilePaths[0];
							this.onok(res.tempFiles[0]);
						}
					});
					return;
				case '保存图片':
					return uni.saveImageToPhotosAlbum({
						filePath: this.avatar,
						success(res) {
							uni.$u.toast('已保存到系统相册');
						}
					});
				default:
					break;
			}
		},
		// 取消上传图片
		oncancel() {
			this.avatarUrl = '';
		},
		// 截取上传图片
		onok(ev) {
			uni.showLoading({
				title: '加载中'
			});
			this.avatarUrl = '';
			let arrayList = [
				{
					name: 'files',
					uri: ev.path,
					file: ev.path
				}
			];

			// 成功后
			// oss 配置信息
			let option = {
				savePath: `pet/pic/${this.time}`,
				AccessKeySecret: this.ossData.accessKeySecret,
				SecurityToken: this.ossData.securityToken,
				AccessKeyId: this.ossData.accessKeyId,
				bucket: this.ossData.buket,
				area: 'oss-cn-hangzhou'
			};

			// 图片单文件上传
			let filePath = arrayList[0].file;

			console.log(ev, arrayList, 'arrayListarrayListarrayListarrayList');

			AliOss.upload(filePath, option, async res => {
				if (res) {
					console.log(res, 'sfd');
					this.path = res;
					console.log('this.path', this.path);

					// 修改信息
					const resData = await this.updateInfo({ avatar: this.path }); //修改头像信息
					console.log(resData);
					if (resData === true) {
						await this.GetUserInfo();
						// uni.$u.toast('修改头像成功!');
						uni.navigateBack();
					}
					uni.hideLoading();
				} else {
					uni.$u.toast('上传失败，请稍后重试');
				}
			});

			return;
			// 上传图片
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	background-color: #000000;
}

.avatar {
	margin-top: 50vh;
	transform: translateY(-50%);
}

::v-deep .frame-left-top {
	position: absolute;
	width: 20px;
	height: 20px;
	left: -6px;
	top: -6px;
	border-left: 4px solid #FF5900;
	border-top: 4px solid #FF5900;
	box-sizing: content-box;
}

::v-deep .frame-left-bottom {
	position: absolute;
	width: 20px;
	height: 20px;
	left: -6px;
	bottom: -6px;
	border-left: 4px solid #FF5900;
	border-bottom: 4px solid #FF5900;
	box-sizing: content-box;
}

::v-deep .frame-right-top {
	position: absolute;
	width: 20px;
	height: 20px;
	right: -6px;
	top: -6px;
	border-right: 4px solid #FF5900;
	border-top: 4px solid #FF5900;
	box-sizing: content-box;
}

::v-deep .frame-right-bottom {
	position: absolute;
	width: 20px;
	height: 20px;
	right: -6px;
	bottom: -6px;
	border-right: 4px solid #FF5900;
	border-bottom: 4px solid #FF5900;
	box-sizing: content-box;
}
</style>
